<template>
    <div id="prodata">
        <el-form
            :model="prodata"
        >
            <el-row id="top">
                <div class="top-left">
                    <!-- <img :src="prodata.header" alt=""> -->
                    <el-upload
                      class="avatar-uploader"
                      action="/header/upload"
                      name="header"
                      :headers="headers"
                      :data="form_data"
                      :show-file-list="false"
                      :on-success="handleFileChange"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="true" :src="prodata.header" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <div class="top-right">
                    <p id="name">{{prodata.name}}</p>
                    <p class="font1">部门：{{prodata.department.name}}</p>
                    <p class="font1">职位：{{prodata.position.name}}</p>
                </div>
            </el-row>
            <el-row class="basic">
                <p class="title">基本信息</p>
                <div class="content" v-if="!showeditbasic">
                    <div class="conDiv">
                        <p class="left" style="display: inline-block; padding-left: 0px">
                            <span class="font2 Label-Width">员工工号</span>
                            <span class="font3">{{prodata.workId}}</span>
                        </p>
                        <el-button icon="el-icon-edit" size="small" @click="showedit(1)" class="font7">编辑</el-button>
                    </div>
                    <p>
                        <span class="font2 Label-Width">员工姓名</span>
                        <span class="font3">{{prodata.name}}</span>
                    </p>
                    <p>
                        <span class="font2 Label-Width">性别</span>
                        <span class="font3">{{prodata.gender}}</span>
                    </p>
                    <p>
                        <span class="font2 Label-Width">出生日期</span>
                        <span class="font3">{{prodata.birthday}}</span>
                    </p>
                    <p>
                        <span class="font2 Label-Width">民族</span>
                        <span class="font3">{{prodata.nation.name}}</span>
                    </p>
                    <p>
                        <span class="font2 Label-Width">籍贯</span>
                        <span class="font3">{{prodata.nativePlace}}</span>
                    </p>
                    <p>
                        <span class="font2 Label-Width">联系地址</span>
                        <span class="font3">{{prodata.address}}</span>
                    </p>
                    <p>
                        <span class="font2 Label-Width">联系电话</span>
                        <span class="font3">{{prodata.phone}}</span>
                    </p>
                    <p>
                        <span class="font2 Label-Width">邮箱地址</span>
                        <span class="font3">{{prodata.email}}</span>
                    </p>
                </div>
                <div class="content" v-if="showeditbasic">
                    <el-form
                        :model="prodata"
                        ref="prodata"
                        :rules="rules"
                        :inline="true"
                        label-width="120px"
                        class="demo-form-inline"
                        style="width: 90%; height: 50vh; backgroundColor: rgba(236,238,239); padding-top: 3vh"
                    >
                       <el-row>
                            <el-form-item label="员工工号" prop="workId" class="font4">
                                <el-input v-model="prodata.workId" class="font5" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="员工姓名" prop="name" class="font4">
                                <el-input v-model="prodata.name" placeholder="请输入姓名" class="font5"></el-input>
                            </el-form-item>
                       </el-row>
                        <el-row>
                            <el-form-item label="性别" prop="gender" class="font4">
                                <el-radio-group v-model="prodata.gender">
                                    <el-radio label="男"  class="font6"></el-radio>
                                    <el-radio label="女"  class="font6"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="出生日期" prop="birthday" class="font4">
                                <el-date-picker type="date" placeholder="选择出生日期" v-model="prodata.birthday" class="font7"></el-date-picker>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="民族" prop="nation.name" class="font4">
                                 <el-select v-model="prodata.nation.id" placeholder="请选择民族" class="font7">
                                    <el-option
                                        v-for="item in nationList"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.name"
                                        style="color: #606266; font: 18px '宋体';"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="籍贯" prop="nativePlace" class="font4">
                                <el-input v-model="prodata.nativePlace" class="font5"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="联系地址" prop="address" class="font4">
                                <el-input v-model="prodata.address" class="font5"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话" prop="phone" class="font4">
                                <el-input v-model="prodata.phone" class="font5"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="邮箱地址" prop="email" class="font4">
                                <el-input v-model="prodata.email" class="font5"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                          <el-form-item style="width: 75%; display: block; text-align: right">
                            <el-button style="margin-right: 40%; font: 18px '宋体'" @click="canceledit(1)">取消 </el-button>
                            <el-button type="primary" @click="confirmedit(1)" style="font: 18px '宋体'">保存</el-button>
                          </el-form-item>
                        </el-row>
                    </el-form>
                </div>
            </el-row>
            <el-row class="basic">
                <p class="title">教育信息</p>
                <div class="content" v-if="!showediteducation">
                    <div class="conDiv">
                        <p class="left" style="display: inline-block; padding-left: 0px">
                            <span class="font2 Label-Width">学校名称</span>
                            <span class="font3">{{prodata.school}}</span>
                        </p>
                        <el-button icon="el-icon-edit" size="small" @click="showedit(2)" class="font7">编辑</el-button>
                    </div>
                    <p>
                        <span class="font2 Label-Width">专业</span>
                        <span class="font3">{{prodata.specialty}}</span>
                    </p>
                    <p>
                        <span class="font2 Label-Width">学历</span>
                        <span class="font3">{{prodata.tiptopDegree}}</span>
                    </p>
                </div>
                <div class="content" v-if="showediteducation">
                    <el-form
                        :model="prodata"
                        ref="prodata"
                        :rules="rules"
                        :inline="true"
                        label-width="120px"
                        style="width: 90%; height: 35vh; backgroundColor: rgba(236,238,239); padding-top: 3vh"
                    >
                       <el-row>
                            <el-form-item label="学校名称" prop="school" class="font4">
                              <el-input v-model="prodata.school" class="font5"></el-input>
                            </el-form-item>
                       </el-row>
                        <el-row>
                            <el-form-item label="专业" prop="specialty" class="font4">
                              <el-input v-model="prodata.specialty" class="font5"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="学历" prop="tiptopDegree" class="font4">
                                <el-input v-model="prodata.tiptopDegree" class="font5"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                          <el-form-item style="width: 75%; display: block; text-align: right">
                            <el-button style="margin-right: 40%; font: 18px '宋体'" @click="canceledit(2)">取消 </el-button>
                            <el-button type="primary" @click="confirmedit(2)" style="font: 18px '宋体'">保存</el-button>
                          </el-form-item>
                        </el-row>
                    </el-form>
                </div>
            </el-row>
             <el-row class="basic">
                <p class="title">工作信息</p>
                <div class="content" v-show="!showeditjob">
                    <div class="conDiv">
                        <p class="left" style="display: inline-block; padding-left: 0px">
                            <span class="font2">工作部门</span>
                            <span class="font3">{{prodata.department.name}}</span>
                        </p>
                        <el-button icon="el-icon-edit" size="small" @click="showedit(3)" class="font7">编辑</el-button>
                    </div>
                    <p>
                        <span class="font2">所在职位</span>
                        <span class="font3">{{prodata.position.name}}</span>
                    </p>
                    <p>
                        <span class="font2">所在职称</span>
                        <span class="font3">{{prodata.jobLevel.name}}</span>
                    </p>
                     <p>
                        <span class="font2">工作状态</span>
                        <span class="font3">{{prodata.workState}}</span>
                    </p>
                </div>
                <div class="content" v-if="showeditjob">
                    <el-form
                        :model="prodata"
                        ref="prodata"
                        :rules="rules"
                        :inline="true"
                        label-width="120px"
                        class="demo-form-inline"
                        style="width: 90%; height: 40vh; backgroundColor: rgba(236,238,239); padding-top: 3vh"
                    >
                       <el-row>
                            <el-form-item label="工作部门" prop="department.name" class="font4">
                                 <el-select v-model="prodata.department.id" placeholder="请选择部门" class="font7">
                                    <el-option
                                        v-for="item in departmentList"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.name"
                                        style="color: #606266; font: 18px '宋体';"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                       </el-row>
                       <el-row>
                            <el-form-item label="所在职位" prop="position.name" class="font4">
                                 <el-select v-model="prodata.position.id" placeholder="请选择部门" class="font7">
                                    <el-option
                                        v-for="item in positionList"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.name"
                                        style="color: #606266; font: 18px '宋体';"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                       </el-row>
                       <el-row>
                            <el-form-item label="所在职称" prop="jobLevel.name" class="font4">
                                 <el-select v-model="prodata.jobLevel.id" placeholder="请选择部门" class="font7">
                                    <el-option
                                        v-for="item in joblevelList"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.name"
                                        style="color: #606266; font: 18px '宋体';"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                       </el-row>
                        <el-row>
                            <el-form-item label="工作状态" prop="workState" class="font4">
                              <el-input v-model="prodata.workState" class="font5"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                          <el-form-item style="width: 75%; display: block; text-align: right">
                            <el-button style="margin-right: 40%; font: 18px '宋体'" @click="canceledit(3)">取消 </el-button>
                            <el-button type="primary" @click="confirmedit(3)" style="font: 18px '宋体'">保存</el-button>
                          </el-form-item>
                        </el-row>
                    </el-form>
                </div>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { validatePhone, validateEMail } from '../../utils/rules'
import { getTime } from '../../utils/common'
export default {
  name: 'ProData',
  data() {
    return {
      headers: {
        authentication: window.sessionStorage.getItem('tokenStr')
      },
      form_data: {
        eid: JSON.parse(window.sessionStorage.getItem('user')).id
      },
      prodata: {},
      proform: {},
      showeditbasic: false,
      showediteducation: false,
      showeditjob: false,
      rules: {
        name: [
          { required: true, message: '昵称不能为空', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
          { validator: validatePhone, message: '请输入正确的电话号码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
          { validator: validateEMail, message: '请输入正确的邮箱', trigger: 'blur' }
        ],
        workState: [
          { required: true, message: '工作状态不能为空', trigger: 'blur' }
        ]
      },
      nationList: [],
      departmentList: [],
      positionList: [],
      joblevelList: []
    }
  },
  created() {
    this.getprodata()
    this.getdepartmentList()
    this.getpositionList()
    this.getjoblevelList()
  },
  methods: {
    onSuccess() {
      window.sessionStorage.setItem('user.header', this.prodata.header)
      this.getprodata()
    },
    // 获取登录的用户信息
    getprodata() {
      var user = JSON.parse(window.sessionStorage.getItem('user'))
      this.prodata = user
      // if (user) {
      //   this.prodata = user
      // } else {
      //   this.getRequest('/admin/emp').then(resp => {
      //     if (resp) {
      //       this.prodata = resp.data
      //     }
      //   }, error => console.log(error))
      // }
      // console.log(this.prodata)
    },
    // 获取民族列表
    getnationList() {
      this.getRequest('/sys/nations').then(resp => {
        if (resp) {
          this.nationList = resp.data
        }
      }, error => console.log(error))
    },
    // 获取部门列表
    getdepartmentList() {
      this.getRequest('/admin/').then(resp => {
        if (resp) {
          this.departmentList = resp.data
        }
      }, error => console.log(error))
    },
    // 获取职位列表
    getpositionList() {
      this.getRequest('/sys/allPos').then(resp => {
        if (resp) {
          this.positionList = resp.data
        }
      }, error => console.log(error))
    },
    // 获取职称列表
    getjoblevelList() {
      this.getRequest('/sys/jobLevels').then(resp => {
        if (resp) {
          this.joblevelList = resp.data
        }
      }, error => console.log(error))
    },
    // 显示修改页面
    showedit(index) {
      this.getnationList()
      this.$forceUpdate()
      if (index === 1) this.showeditbasic = true
      else if (index === 2) this.showediteducation = true
      else if (index === 3) this.showeditjob = true
    },
    // 转换表单
    Formconversion() {
      this.proform = {
        id: this.prodata.id,
        name: this.prodata.name,
        gender: this.prodata.gender,
        birthday: getTime(this.prodata.birthday),
        idCard: this.prodata.idCard,
        wedlock: this.prodata.wedlock,
        nationId: this.prodata.nationId,
        nativePlace: this.prodata.nativePlace,
        politicId: this.prodata.politicId,
        email: this.prodata.email,
        phone: this.prodata.phone,
        address: this.prodata.address,
        departmentId: this.prodata.departmentId,
        jobLevelId: this.prodata.jobLevelId,
        posId: this.prodata.posId,
        engageForm: this.prodata.engageForm,
        tiptopDegree: this.prodata.tiptopDegree,
        specialty: this.prodata.specialty,
        school: this.prodata.school,
        beginDate: this.prodata.beginDate,
        workState: this.prodata.workState,
        workId: this.prodata.workId,
        contractTerm: this.prodata.contractTerm,
        conversionTime: this.prodata.conversionTime,
        beginContract: this.prodata.beginContract,
        endContract: this.prodata.endContract
      }
    },
    // 确定修改
    confirmedit(index) {
      // 隐藏修改
      if (index === 1) this.showeditbasic = false
      else if (index === 2) this.showediteducation = false
      else if (index === 3) this.showeditjob = false
      this.Formconversion()
      // 提交修改
      this.putRequest('/admin/emp', this.proform).then(resp => {
        if (resp) {
          console.log(resp.msg)
          // 获取修改后的当前用户信息
          this.getRequest('/admin/emp').then(resp => {
            if (resp) {
              var user = JSON.parse(window.sessionStorage.getItem('user'))
              resp.data.forEach(item => {
                if (item.id === user.id) {
                  window.sessionStorage.setItem('user', JSON.stringify(item))
                  this.prodata = item
                  console.log(this.prodata)
                  this.$forceUpdate()
                }
              })
            }
          }, error => console.log(error))
        }
      }, error => console.log(error))
    },
    // 取消修改
    canceledit(index) {
      if (index === 1) this.showeditbasic = false
      else if (index === 2) this.showediteducation = false
      else if (index === 3) this.showeditjob = false
      this.getprodata()
    },
    // 图片上传成功的回调
    handleFileChange(response) {
      var info = JSON.parse(sessionStorage.getItem('user'))
      delete info.header
      info.header = response.data
      this.prodata = Object.assign(this.prodata, info)
      window.sessionStorage.setItem('user', this.prodata)
      this.$forceUpdate()
    },
    // 图片上传之前的校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
#prodata {
  display: inline-block;
  width: 100%;
  padding: 5px;
}
#prodata .el-form {
  width: 105%;
  height: 87vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-form #top {
  width: 100%;
  height: 20vh;
  display: flex;
  margin-top: 15px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(222,225,230);
}
.el-form #top .top-left {
  display: inline-block;
  width: 15%;
  text-align: center;
  padding-bottom: 10px;
}
.el-form #top .top-left img {
  display: inline-block;
  width: 70%;
  height: 80%;
  border-radius: 50%;
}
/** 头像 start */
 /* .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 95%;
    height: 95%;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  } */
  /** 头像 end */
.el-form #top .top-right {
  display: inline-block;
  width: 50%;
}
.el-form #top .top-right #name {
  color: black;
  font: 32px '宋体';
  font-weight: bolder;
  margin-top: 3%;
}
.el-form .content .conDiv {
  display: flex;
  justify-content: space-between;
  width: 92%;
}
.el-form .content:hover .conDiv >.el-button{
  display: block;
  background-color: rgba(236,238,239);
}
.el-form .content .conDiv .el-button {
  display: inline-block;
  border: none;
  display: none;
}
.el-form .font1 {
  color: #606266;
  font: 18px '宋体';
  margin-top: 8px;
}
.el-form .font2 {
  display: inline-block;
  width: 80px;
  text-align: right;
  color: #606266;
  font: 18px '宋体';
  margin-bottom: 25px;
}
.el-form .font3 {
  display: inline-block;
  width: 200px;
  text-align: center;
  color: #606266;
  font: 18px '宋体';
  margin-bottom: 25px;
}
.el-form #basic {
  width: 100%;
}
.el-form .title {
  font: 24px '宋体';
  font-weight: bolder;
  margin: 1vh 1vw;
}
.el-form .content {
  width: 100%;
  padding-left: 2vw;
  padding-top: 15px;
}
.el-form .content:hover {
  background-color: #ECEEEF;
}
/** 表单的标签文本样式 */
.content .demo-form-inline .el-row .el-form-item {
  width: 50%;
}
.font4 /deep/ .el-form-item__label{
  width: 40%;
  color: #606266;
  font: 18px '宋体';
  padding-top: 5px;
}
.font5 /deep/ .el-input__inner {
  width: 170%;
  color: #606266;
  font: 18px '宋体';
}
.font6 /deep/ .el-radio__label {
  color: #606266;
  font: 18px '宋体';
}
.font7 {
  color: #606266;
  font: 18px '宋体';
}
.font7:hover {
  color: #409EFF;
}
</style>
